<script setup>
import {ref,onMounted, reactive} from 'vue'
import easyapi from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
//定义绑定的数据
const tableData=ref([]);
//控制新增窗口是否显示
const addWinVisible=ref(false);
//控制编辑信息窗口
const editWinVisible=ref(false);
//新增数据绑定对象
const addObject=ref({
  salary: '',
  position:''
});
const salarys=ref([3800,4000,4500,5000]);
const positions=ref(['清洁','前台','维修','经理']);


//编辑数据绑定对象
const editObject=ref({});
//记录修改数据的下标
var editIndex=-1;
const checkObj=ref({
  page:1,
  size:5
});
const total=ref(90);
//分页绑定对象
// const pageObj=ref({
//   size:20,
//   page:1
// })
//查询数据的文本
//挂载页面时查询数据
onMounted(async function(){
  checkDate();
});

const del=function(index,row){
  ElMessageBox.confirm(
'确定要删除该行数据吗？',
'提示框',
{
confirmButtonText:"确认",
cancelButtonText:"取消",
type:'warning',
}
  ).then(async function(){
    //提交数据
    let result =await easyapi.del("/api/employees",row.id);
    //刷新表单数据
    tableData.value.splice(index,1);
    if(result.code==200){
    //提示删除成功
    ElMessage({
        type: 'success',
        message: '删除成功',
      })
    }else{
      ElMessage({
        type: 'info',
        message: 'result.message',
      })
    }
  })
}
//显示窗口
const openAddWin=()=>{
  addObject.value={};
  addWinVisible.value=true;
}
const closeAddWin=()=>{
  addWinVisible.value=false;
} 
//保存新增数据  addObject
const addSave=async function(){
  formRefadd.value.validate(async (valid) => {
    if(valid){
      console.log(addObject);
  //发送请求
  // easyapi.postForm('/api/staff',addObject.value);
  let result=await easyapi.postJson('/api/employeesjson',addObject.value);
  //表格数据变更
  tableData.value.unshift(result.data);
  ElMessage({
        type: 'success',
        message: '保存成功',
      })
  //提示
  closeAddWin();
    }
  })
  
}
const formRefadd=ref([]);
//表单验证
const addrules=reactive({
  name: [
    { required: true, message: '请输入客人姓名', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5]{2,4}$/, // 匹配两到四个汉字
      message: '客人姓名必须为两到四个汉字',
      trigger: 'blur'
    }
  ],
  salary: [{ required: true, message: '请选择薪资', trigger: 'change' }],
  position: [{ required: true, message: '请选择职位', trigger: 'change' }],
  phoneNumber: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    {
      pattern: /^(1[3-9]\d{9})$/, // 匹配以13至19开头的11位数字
      message: '输入正确的手机号',
      //'电话号码必须为11位数字，并且以13至19开头',
      trigger: 'blur'
    }
  ]
});


/************************************************** */
//点击编辑按钮执行的方法
const edit=function(index,row){
  //记录数该数据的下标
  editIndex=index;
  //绑定要修改的数据
  editObject.value.id=row.id;
  editObject.value.name=row.name;
  editObject.value.position=row.position;
  editObject.value.salary=row.salary;
  editObject.value.phoneNumber=row.phoneNumber;
  //打开对话框
  editWinVisible.value=true;

}
const editformRef=ref([]);
//保存修改编辑数据
const editSave=async function(){
  editformRef.value.validate(async (valid) =>{
    if(valid){
      //发送请求
 let result=await easyapi.putJson("/api/employeesjson",editObject.value); 
  //刷新表格
  tableData.value[editIndex]=result.data;
  //提示
  ElMessage({
        type: 'success',
        message: '保存成功',
      });
    } editWinVisible.value=false;
  })
}
// const changePage=function(val){
// //val就是点击的页码
// pageObj.value.page=val;

// }

//表单验证
const editrules=reactive({
  name: [
    { required: true, message: '请输入客人姓名', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5]{2,4}$/, // 匹配两到四个汉字
      message: '客人姓名必须为两到四个汉字',
      trigger: 'blur'
    }
  ],
  salary: [{ required: true, message: '请选择薪资', trigger: 'change' }],
  position: [{ required: true, message: '请选择职位', trigger: 'change' }],
  phoneNumber: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    {
      pattern: /^(1[3-9]\d{9})$/, // 匹配以13至19开头的11位数字
      message: '输入正确的手机号',
      //'电话号码必须为11位数字，并且以13至19开头',
      trigger: 'blur'
    }
  ]
});

/*********************************************** */

const checkDate=async function(val){
  if(typeof val=='number'){
    checkObj.value.page=val;
  }
  //查询数据
  let result = await easyapi.getSearch("/api/searchemployees",checkObj.value);
  //result现在返回的数据 {code,data,message}   data-->{list,count}
  //更新表格数据中的数据
tableData.value=result.data.list;
total.value=result.data.count;
}
</script>

    <template>
    <el-input v-model="checkObj.name" style="width: 150px" placeholder="请输入查询的姓名" clearable/>
        <el-input v-model="checkObj.position" style="width: 150px" placeholder="请输入查询的职位" clearable/>
        <el-button type="success" @click="checkDate">查询</el-button>
    <el-button type="success" @click="openAddWin">新增</el-button>
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <!-- <el-table-column prop="id" label="ID" width="180" /> -->
    <el-table-column prop="name" label="姓名" width="180"/>
    <el-table-column prop="salary" label="薪资" width="180" />
    <el-table-column prop="position" label="职位" width="180" />
    <el-table-column prop="phoneNumber" label="电话号码"  />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
        <el-button type="warning" @click="edit(scope.$index,scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--current-page分页组件初始显示的页码 size每页的条数  -->
  <el-pagination 
  :page-size="checkObj.size"
  :current-page="checkObj.page"
  background layout="prev, pager, next" :total="total" @current-change="checkDate"/>
  <!--start 新增信息弹出框 -->
    <el-dialog v-model="addWinVisible" title="新增员工" width="500">
      <el-form :model="addObject" :rules="addrules" ref="formRefadd">
      <el-form-item label="姓名" label-width="80" prop="name">
        <el-input v-model="addObject.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="薪资" label-width="80" prop="salary">
      <el-select v-model="addObject.salary" placeholder="请选择薪资" clearable>
        <el-option v-for="salary in salarys" :key="salary" :label="salary" :value="salary" />
      </el-select>
    </el-form-item>
    <el-form-item label="职位" label-width="80" prop="position">
      <el-select v-model="addObject.position" placeholder="请选择工作岗位" clearable>
        <el-option v-for="position in positions" :key="position" :label="position" :value="position" />
      </el-select>
    </el-form-item>
      <el-form-item label="电话号码" label-width="80" prop="phoneNumber">
        <el-input v-model="addObject.phoneNumber" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addWinVisible = false">取消</el-button>
        <el-button type="primary" @click="addSave">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--end 新增信息弹出框 -->

  <!-- 编辑信息弹出框 -->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
      <el-form :model="editObject":rules="editrules" ref="editformRef">
        <el-form-item label="姓名" label-width="80" prop="name">
        <el-input v-model="editObject.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="薪资" label-width="80" prop="salary">
      <el-select v-model="editObject.salary" placeholder="请选择薪资" clearable>
        <el-option v-for="salary in salarys" :key="salary" :label="salary" :value="salary" />
      </el-select>
    </el-form-item>
    <el-form-item label="职位" label-width="80" prop="position">
      <el-select v-model="editObject.position" placeholder="请选择工作岗位" clearable>
        <el-option v-for="position in positions" :key="position" :label="position" :value="position" />
      </el-select>
    </el-form-item>
      <el-form-item label="电话号码" label-width="80" prop="phoneNumber">
        <el-input v-model="editObject.phoneNumber" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editWinVisible = false">取消</el-button>
        <el-button type="primary" @click="editSave">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- end编辑 -->


</template>
<style>
</style>
